
<template>
  <div class="layout">
    <div :style="bigScreenStyle">
      <widget
        v-for="(widget, index) in widgets"
        :key="index + widgetKey"
        v-model="widget.value"
        :type="widget.type"
      />
    </div>
  </div>
</template>

<script>
import widget from "../designer/widget/temp";
// import widget from "../designer/widget/widget.vue";
import { DataMessage } from "@/utils/topolpgy/msg";
import { SCADA_MSG, getDataIdList } from "@/mqtt/msg.js";
import { myStorage } from "@/utils/localStorage";
import store from "@/store/index.js";

export default {
  name: "Login",
  components: {
    widget,
  },
  data() {
    return {
      bigScreenStyle: {},
      widgets: [],
      getPage: false,
      widgetKey: 0,
    };
  },
  created() {
    this.initWidgetKey();
    let jsonString = myStorage.get("vuex");
    store.commit("localStorage2Vuex", JSON.parse(jsonString));
  },
  watch: {},
  mounted() {
    getDataIdList();
    // this.reqTopologyData();
    window.onbeforeunload = () => {
      console.log("onbeforeunload save vuex to localStorage");
      myStorage.set("vuex", JSON.stringify(store.state));
    };

    this.timer = setInterval(() => {
      if (!this.getPage) {
        const id = this.$route.query.id;
        if (store.state.page.hasOwnProperty(id)) {
          const data = store.state.page[id];
          const equipment = document.body.clientWidth;
          const ratioEquipment = equipment / data.dashboard.width;
          this.bigScreenStyle = {
            width: data.dashboard.width + "px",
            height: data.dashboard.height + "px",
            "background-color": data.dashboard.backgroundColor,
            "background-image": "url(" + data.dashboard.backgroundImage + ")",
            "background-position": "0% 0%",
            "background-size": "100% 100%",
            "background-repeat": "initial",
            "background-attachment": "initial",
            "background-origin": "initial",
            "background-clip": "initial",
            // transform: `scale(${ratioEquipment}, ${ratioEquipment})`,
            "transform-origin": "0 0",
          };
          this.widgets = data.widgets;
          this.getPage = true;
        }
      } else {
        clearInterval(this.timer);
        this.timer = null;
      }
    }, 100);
  },
  methods: {
    initWidgetKey() {
      this.widgetKey = 8000 + Math.trunc(Math.random() * 8000);
    },
  },
};
</script>

<style scoped lang="scss">
.layout {
  // width: 1920px;
  height: 100vh;
  text-align: center;
  position: relative;
  overflow: auto;
}

.bottom-text {
  width: 100%;
  color: #a0a0a0;
  position: fixed;
  bottom: 16px;
  z-index: 9999;
}
</style>
